<!-- views/counselor/Report.vue -->
<template>
  <div class="report-container">
    <!-- 假期选择 -->
    <div class="selector">
      <el-select
          v-model="selectedHoliday"
          placeholder="请选择假期"
          @change="loadStats"
          style="width: 250px;"
      >
        <el-option
            v-for="h in holidays"
            :key="h.id"
            :label="h.name"
            :value="h.id"
        />
      </el-select>
    </div>

    <!-- 统计内容 -->
    <div v-if="stats" class="stats-content">
      <!-- 去向统计 -->
      <div class="stats-card">
        <h3 class="card-title">去向类型统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">{{ stats.totalStudents }}</div>
            <div class="stat-label">总人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #409EFF;">{{ stats.leaveCount }}</div>
            <div class="stat-label">离校人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #67C23A;">{{ stats.stayCount }}</div>
            <div class="stat-label">留校人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #E6A23C;">{{ stats.outProvince }}</div>
            <div class="stat-label">出省人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #F56C6C;">{{ stats.inProvince }}</div>
            <div class="stat-label">省内人数</div>
          </div>
        </div>
        <div ref="pieChartRef" class="chart-container"></div>
      </div>

      <!-- 登记情况 -->
      <div class="stats-card">
        <h3 class="card-title">登记情况统计</h3>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">{{ stats.totalStudents }}</div>
            <div class="stat-label">总人数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #409EFF;">{{ stats.registered }}</div>
            <div class="stat-label">已登记</div>
          </div>
          <div class="stat-item">
            <div class="stat-value" style="color: #F56C6C;">{{ stats.unregistered }}</div>
            <div class="stat-label">未登记</div>
          </div>
        </div>
        <div ref="barChartRef" class="chart-container"></div>
      </div>
    </div>

    <!-- 无数据提示 -->
    <div v-else class="no-data">
      <el-empty description="请选择假期查看统计信息" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      holidays: [],
      selectedHoliday: null,
      stats: null,
      pieChartRef: null,
      barChartRef: null
    };
  },
  async mounted() {
    await this.loadHolidayList();
  },
  methods: {
    /**
     * 加载假期列表
     */
    async loadHolidayList() {
      try {
        const res = await $counselorAPI.getHolidays(1, 100);
        this.holidays = res.records || [];

        // 默认选中第一个假期
        if (this.holidays.length > 0) {
          this.selectedHoliday = this.holidays[0].id;
          await this.loadStats();
        }
      } catch (err) {
        console.error('加载假期失败', err);
      }
    },

    /**
     * 加载统计数据
     */
    async loadStats() {
      if (!this.selectedHoliday) return;

      try {
        this.stats = await $counselorAPI.getTravelStats(this.selectedHoliday);
        this.$nextTick(this.initCharts);
      } catch (err) {
        console.error('加载统计失败', err);
      }
    },

    /**
     * 初始化图表
     */
    initCharts() {
      // 初始化饼图
      if (this.pieChartRef && this.stats) {
        const chart = echarts.init(this.pieChartRef);
        chart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['离校', '留校']
          },
          series: [
            {
              name: '去向类型',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: this.stats.leaveCount, name: '离校', itemStyle: { color: '#409EFF' } },
                { value: this.stats.stayCount, name: '留校', itemStyle: { color: '#67C23A' } }
              ]
            }
          ]
        });

        // 窗口大小变化时，图表自适应
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }

      // 初始化柱状图
      if (this.barChartRef && this.stats) {
        const chart = echarts.init(this.barChartRef);
        chart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['已登记', '未登记'],
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '人数',
              type: 'bar',
              barWidth: '60%',
              data: [
                { value: this.stats.registered, itemStyle: { color: '#409EFF' } },
                { value: this.stats.unregistered, itemStyle: { color: '#F56C6C' } }
              ]
            }
          ]
        });

        // 窗口大小变化时，图表自适应
        window.addEventListener('resize', () => {
          chart.resize();
        });
      }
    }
  }
};
</script>
